<template>
  <div class="barContaienr" ref="barContaienr"></div>
</template>

<script>
import * as echarts from 'echarts'
  export default {
    name:'BarEchart',
    mounted(){
      let mycharts = echarts.init(this.$refs.barContaienr)
      let options = {
        grid:{
          left:0,
          right:0,
          top:0,
          bottom:0
        },
        xAxis:{
          show:false,
          type:'category'
        },
       
        yAxis:{
          show:false
        },
        series:[{
          type:'bar',
          data:[20,30,50,30,40,28],
          itemStyle:{
            color:{
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                  offset: 0, color: '#f89' // 0% 处的颜色
              }, {
                  offset: 1, color: '#bfa' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            },
           
          },
          label:{
              show:true,
              color:'#999',
              rotate:-30
          },
        
          
        }],
        tooltip:{
          //  position: [10, 10]
        }
        
      }
      mycharts.setOption(options)
      window.addEventListener('resize',()=>{
        mycharts.resize()
      })
    }
  }
</script>

<style lang="scss" scoped>
  .barContaienr{
    width: 100%;
    height: 100%;
  }
</style>